<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户等级添加或修改页面</title>
    </head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <button class="layui-btn layui-col-md1" id="back"><i class="layui-icon">&#xe65c;</i>返回</button>
        <h1 class="layui-col-md-offset5">用戶等级</h1>
    </div>


    <hr/>

    <form class="layui-form " id="userForm"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <input hidden="hidden" th:value="${userLevel==null? null:userLevel.id}" id="levelid" name="id"/>
        <div class="layui-form-item">
            <label class="layui-form-label">等级名称</label>
            <div class="layui-input-inline">
                <input type="text" id="name" th:value="${userLevel==null? null:userLevel.name}" name="name" lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
            <div id="nameMsg" class="layui-form-mid layui-word-aux"></div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">等级描述</label>
            <div class="layui-input-block">
                <textarea name="mark" th:text="${userLevel==null? null:userLevel.mark}" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    layui.use(['form', 'layer'], function () {
        var form = layui.form;
        $ = layui.jquery;
        layer = layui.layer;
        form.render(); //更新全部
        /*****************************
         * @Description: 验证等级名称
         * @Param:
         * @return:
         * @Author: 刘涛
         * @Date: 2018/3/15
         *******************************/
        $("#name").blur(function () {
            $.ajax({
                type: "post",
                url: "/userlevel/verifyLevelName",
                dataType: 'json',
                data: {
                    "name": $("#name").val(),
                    "id":$("#levelid").val()
                },
                success: function (data) {
                    $("#nameMsg").html(data.msg);
                    $("#nameMsg").attr("code", data.code);
                }
            });
        });

        /*****************************
        * @Description: 表单提交
        * @Param:  
        * @return:  
        * @Author: 刘涛
        * @Date: 2018/3/15
        *******************************/
        form.on('submit(*)', function (data) {
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            if ($("#nameMsg").attr("code") != 200) {
                layer.msg("级别名称不能重复", {icon: 2, anim: 6});
                return false;
            }
            $.ajax({
                url: "/userlevel/saveOrUpdateLevelInBack",
                dataType: "json",
                data: data.field,
                type: "post",
                success: function (data) {
                    if (data.code == 200) {
                        layer.msg(data.msg+'页面稍后跳转', {icon: 1, anim: 1});
                        setTimeout('$("#content-body").load("/userlevel/goUserLevelPage")',3000);
                    } else {
                        layer.msg(data.msg, {icon: 2, anim: 6});
                    }
                }
            })

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        /**
         * 返回按钮
         * */
        $("#back").click(function () {
            $("#content-body").load("/userlevel/goUserLevelPage");
        })
    });
</script>

</body>
</html>